Coffee School

Code Editor

// Creating environment variables var playerSize = 10; var sceneWidth = 300, sceneHeight = 150; var groundHeight = 10; var playAreaHeight = (sceneHeight - groundHeight); // Create the variables to track player movement var playerVel = 0; // Stores the player's velocity var g = 0.4; // The constant acceleration cause by "gravity" // Object width! var objectWidth = 2 * playerSize; // Create the ground! Crafty.e("Solid, 2D, DOM, Color") .attr({x: 0, y: playAreaHeight, w: sceneWidth, h: groundHeight}) .color("#00ff00"); // Create our player's base entity Crafty.e("2D, DOM, Color") // Specifying the components to add .attr({x: 30, y: 30, w: playerSize, h: playerSize}) // Specifying the dimensions and the point to draw from .color("#ff0000") // Specifying the colour of the rectangle .bind("EnterFrame", function() { // Binds the "EnterFrame" event to the entity if(this.y < 0) { playerVel = g; // Prevent the player from going above the game screen } else { playerVel += g; // Adds the "gravitational acceleration" to the player's velocity } this.y += playerVel; // Change the player entities y position based on the player velocity }) .bind("KeyDown", function(event) { // Binds the "KeyDown" event to our player entity if(event.key == Crafty.keys.SPACE){ // If the key is the spacebar then "flap" playerVel = -5; // Sets the player's speed and direction to go upwards } }); function newObstacle() { var randomHeight = Math.floor((Math.random() * (sceneHeight/2)) + (sceneHeight/3)); var bottomOfTopHalf = playAreaHeight - randomHeight; var topOfBottomHalf = bottomOfTopHalf + (4 * playerSize); // Create the top half of the pipe Crafty.e("Obstacle, 2D, DOM, Color, Solid") .attr({x: sceneWidth, y: 0, w: objectWidth, h: bottomOfTopHalf}) .color("#003319"); // Create the bottom half of the pipe Crafty.e("Obstacle, 2D, DOM, Color, Solid") .attr({x: sceneWidth, y: topOfBottomHalf, w: objectWidth, h: playAreaHeight - topOfBottomHalf}) .color("#003319"); }

Preview

Console Log:

Goal: Creating obstacles at set intervals

Now that we have a function to generate obstacles we need to call it in Crafty’s game loop. Usually in these sorts of games the obstacles come at the player at a fixed rate, so that’s what we’re going to do!

An easy way to create our objects at fixed intervals is using a variable counter that we increase by one each time the game loop runs. We then check if this counter is high enough to make a new obstacle, if it is then we reset the counter and create an obstacle.

First lets create our counter variable! For now, we can put it up at the top of our JavaScript with the other variables. Let’s have the counter start at 0, so give it that value when you declare it.

var obstacleCounter = 0;

Next we want to increase the obstacle counter each time the game loop runs. To do this you can place the code inside the EnterFrame event code block we already bound to the player or we could make another code block to separate the bits of code with different purposes.

So we should add another .bind to our Player entity, and use the event EnterFrame. Inside this block of code we’ll do the increasing of our counter and checking whether to make a new obstacle. Let’s add that bind to the end of our entity (remember to move the ;):

.bind("EnterFrame", function() {
    // Check if counter is high enough
    // Make obstacle and reset counter
    obstacleCounter++;
});

Crafty tries to play 50 game loops every second, so if we want to make a new obstacle about every two seconds then we can generate an obstacle when the counter is at least 100 and then reset it.

Try putting an if statement in our new code block to check the counter and make a new obstacle if the counter is high enough!

///

if(obstacleCounter>100){
    obstacleCounter=0;
    newObstacle();
}

Try running the code! What happens?